<template>
  <div class="analyse_type">
    <div class="analyse_type-title">查询参数配置</div>
    <event-report-config
      v-if="form.type&&form.type==1"
      :config="form.config.config"
      :events="events"
      :properties="properties"
      :measures="measures"
      :time="form.config.time"
      :form="form"
    >
    </event-report-config>
    <funnel-report-config
      v-if="form.type&&form.type==2"
      :config="form.config.config"
      :events="events"
      :properties="properties"
      :measures="measures"
      :time="form.config.time"
      :form="form"
    >
    </funnel-report-config>
    <path-report-config
      v-if="form.type&&form.type==3"
      :config="form.config.config"
      :events="events"
      :properties="properties"
      :measures="measures"
      :time="form.config.time"
      :form="form"
    >
    </path-report-config>
    <retention-report-config
      v-if="form.type&&form.type==4"
      :config="form.config.config"
      :events="events"
      :properties="properties"
      :measures="measures"
      :time="form.config.time"
      :form="form"
    >
    </retention-report-config>
    <SqlQuery :queryForm="form" v-if="form.type != undefined && form.type==0" />
  </div>
</template>

<script>
import EventReportConfig from './analyseFolder/event_analysis/EventReportConfig.vue';
import FunnelReportConfig from './analyseFolder/funnel_analysis/FunnelReportConfig.vue';
import PathReportConfig from './analyseFolder/path_analysis/PathReportConfig.vue';
import RetentionReportConfig from './analyseFolder/retention_analysis/RetentionReportConfig.vue';
import SqlQuery from '../../sqlQuery/sql_query.vue'
import { mapActions, mapState } from 'vuex'
  export default {
    components: {
      EventReportConfig,
      FunnelReportConfig,
      PathReportConfig,
      RetentionReportConfig,
      SqlQuery
    },
    data() {
      return {
        events: [],
        measures: [],
        propertiesEvent: [],
        propertiesUser: [],
      }
    },
    props: ['form'],
    computed: {
      ...mapState('custom', ['reportForm']),
      properties() {
        return [...this.propertiesEvent,...this.propertiesUser]
      }
    },
    methods: {
      ...mapActions('analyseType',['getEvents', 'getMeasures', 'getPropertiesEvent', 'getPropertiesUser', 'getPropertiesOfUserTag']),
      loadList () {
        if (this.form.type != 0) {
          this.getEvents().then(res=>{
            this.events = [...res.data]
          })
          this.getMeasures().then(res=>{
            this.measures = [...res.data]
          })
          this.getPropertiesEvent().then(res=>{
            this.propertiesEvent = [...res.data]
          })
          this.getPropertiesUser().then(res => {
            this.propertiesUser = this.propertiesUser.concat(res.data);
          })
          this.getPropertiesOfUserTag().then(res=>{
            this.propertiesUser = this.propertiesUser.concat(res.data.data);
          })
        }
      }
    },
    mounted() {
      this.loadList()
    }
  }
</script>

<style scoped>
.analyse_type{
  height: 100%;
}

.analyse_type-title {
  font-weight: bold;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,.85);
  line-height: 32px;
}
</style>
